<!-- 两重点一重大 -->
<script lang="ts" setup>
import { computedLoading } from '@/hooks/computed-loading';

defineOptions({ name: 'PointMajor' });

const components = [
  {
    name: '危险化工工艺',
    component: () => import('./process/index.vue'),
  },
  {
    name: '危险化学品',
    component: () => import('./chemicals/index.vue'),
  },
  {
    name: '重大危险源',
    component: () => import('./hazard-source/index.vue'),
  },
];

const activeIndex = ref(components[0].name);

const [activeComponent, componentLoading] = computedLoading(async () => {
  const m = await components.find((e) => e.name === activeIndex.value)?.component();
  return m?.default;
});
</script>

<template>
  <page-content m="0!" p="0!">
    <template #header>
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        w="100%"
        @select="(index) => (activeIndex = index)"
      >
        <el-menu-item v-for="item in components" :key="item.name" :index="item.name">
          {{ item.name }}
        </el-menu-item>
      </el-menu>
    </template>
    <div v-loading="componentLoading" flex="~ col 1" of="hidden">
      <component :is="activeComponent" />
    </div>
  </page-content>
</template>

<style lang="scss" scoped>
.el-menu {
  --el-menu-horizontal-height: 30px;

  .el-menu-item {
    padding: 0 10px;
    margin-right: 10px;
    font-size: 13px;
    background: #e4e7ed;
    border-bottom: 0 !important;
    border-radius: 4px 4px 0 0;

    &.is-active {
      font-weight: 400;
      background: #e2f0ff;
    }
  }
}
</style>
